<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" label-position="top" class="myform">
            <div>
                <el-form-item label="标签分类/内容" class="myform-item">
                    <el-input
                        v-model="form.title"
                        placeholder="请输入标签分类/内容"
                        clearable
                        @keyup.enter.native="onSearch"
                    ></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">新建分类</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="标签分类" align="center" prop="title"></el-table-column>
            <el-table-column label="排序" align="center" prop="listorder"></el-table-column>
            <el-table-column label="标签底色" align="center" prop="font_color">
                <template slot-scope="{ row }">
                    <el-tag :color="row.font_color" effect="dark">{{ row.font_color }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                    <el-button type="text"  @click="onEdit(row.id)" >编辑</el-button>
                    <el-button type="text" style="color:red" @click="onDelete(row.id)" v-if="row.title!='形制'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :form="form"
            :total="total"
            @paginationPostOrderTaskList="postAdminOperateGetLabelList"
        />
        <el-dialog title="新建分类" :visible.sync="dialogVisible" width="30%">
            <el-form :model="tagform" :rules="rules" ref="tagform" label-width="100px">
                <el-form-item label="分类名称" prop="title">
                    <el-input
                        v-model="tagform.title"
                        placeholder="请输入分类名称"
                        clearable
                        style="width:70%"
                    ></el-input>
                </el-form-item>
                <el-form-item label="标签底色" prop="font_color">
                    <el-color-picker v-model="tagform.font_color"></el-color-picker>
                </el-form-item>
                <el-form-item label="排序" prop="listorder">
                    <el-input
                        v-model="tagform.listorder"
                        placeholder="请输入排序"
                        clearable
                        style="width:70%"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onClickSubmit('tagform')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    postAdminOperateGetLabelList,
    postAdminOperateEditLabel,
    postAdminOperateDelLabel
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
    components: { pagination },
    data() {
        return {
            loading: false,
            dialogVisible: false, //审核
            tagform: {
                title: "",
                font_color: "",
                listorder: "",
                fid: 0
            },
            rules: {
                title: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                font_color: [
                    { required: true, message: '请选择标签底色', trigger: 'blur' },
                ],
                listorder: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ]
            },
            form: {
                title: '',
                page: 1,
                size: 10,
            },
            tableData: [],
            total: 1,
        };
    },
    activated() {
        let form = this.form;
        this.postAdminOperateGetLabelList(form);
    },
    methods: {
        // 查看
        onEdit(id) {
            this.$router.push({ name: "OperationalDepartmentTagEdit", query: { id } });
        },
        // 删除
        onDelete(id) {
            let obj = {
                id,
            };
            let { form } = this
            this.$confirm("确定删除该标签种类?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    postAdminOperateDelLabel(obj).then((res) => {
                        this.postAdminOperateGetLabelList(form);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 提交
        onClickSubmit(tagformtext) {
            let that = this;
            let { form, tagform } = this
            this.$refs[tagformtext].validate(async (valid) => {
                if (valid) {
                    postAdminOperateEditLabel(tagform).then((res) => {
                        that.postAdminOperateGetLabelList(form);
                        that.$message({
                            type: "success",
                            message: `新建成功!`,
                        });
                        this.tagform = {
                            title: "",
                            font_color: "",
                            listorder: "",
                            fid: 0
                        }
                        this.dialogVisible = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 采购列表
        async postAdminOperateGetLabelList(data) {
            this.loading = true;
            this.form = data;
            postAdminOperateGetLabelList(data)
                .then((res) => {
                    this.loading = false;
                    console.log("采购列表", res);
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminOperateGetLabelList(this.form);
        },
    },
};
</script>

<style lang="scss" scoped>
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
}
</style>
